<template>
	<div id="card" class="cardStyle">
		<div class="main">
			<div class="text">
				<label class="detail">{{ greetings }}</label>
			</div>
		</div>
	</div>

</template>

<script setup lang="ts">
import {$local} from '@/store/index';

const date: Date = new Date();
const userInfo = $local.get("user");
const greetings = computed(() => {
	let name = userInfo.username || " ";
	let tips:string = "你好，"+name; 
	if (date.getHours() >= 6 && date.getHours() < 8) {
		return tips + ",晨起披衣出草堂，轩窗已自喜微凉🌅！";
	} else if (date.getHours() >= 8 && date.getHours() < 12) {
		return tips + ",上午好🌞！";
	} else if (date.getHours() >= 12 && date.getHours() < 18) {
		return tips + ",下午好☕！";
	} else if (date.getHours() >= 18 && date.getHours() < 24) {
		return tips + ",晚上好🌃！";
	} else if (date.getHours() >= 0 && date.getHours() < 6) {
		return tips + ",偷偷向银河要了一把碎星，只等你闭上眼睛撒入你的梦中，晚安🌛！";
	}
})
</script>

<style lang="scss">
.cardStyle {
	height: 50px;
	width: 100%;

}

.main {
	position: relative;
	width: 100%;
	height: 100%;
	//background-color: #7b7b7b;
	//background: rgba(255, 255, 255, 0.2);
	box-shadow: 0px 3px 7px 0px rgb(0 0 0 / 35%);
}

.text {
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	//margin-left: var(ht);
}

.detail {
	display: block;
	font-size: 18px;
	//display: block;
	color: #7b7b7b;
	margin-left: 50px;
}

</style>